<template>
  <ul>
    <li v-for="item,index in tabArr">
      <a href="#" @click="activeIndex = index" :class="{ active:  activeIndex === index}">{{ item.name }}</a>
    </li>
  </ul>
</template>

<script setup>
  const tabArr = [{id: 1, name: "京东秒杀"}, 
  {id: 2, name: "每日特价"}, 
  {id: 3, name: "品类秒杀"}]
  import { ref } from 'vue'
  const activeIndex = ref(0)
</script>

<style scoped>
  *{
    margin: 0;
    padding: 0;
  }
  ul{
    display: flex;
    list-style: none;
    border-bottom: 2px solid #e01222;
    padding: 0px 10px;
  }
  ul li{
    width: 100px;
    height: 50px;
    line-height: 50px; /*行高居中显示*/
    text-align: center;
  }
  ul li a{
    display: block; /*占满父元素*/
    text-decoration: none;
    color: black;
    font-weight: bold;
  }
  ul li a.active{
    color: white;
    background-color: #e01222;
  }
</style>